<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" style="margin-top: 5px;">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总销售额" :total="'￥ '+totalAmount">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <trend :flag="monthAmountFlag" style="margin-right: 16px;">
              <span slot="term">月同比</span>
              {{tbAmount}}%
            </trend>
            <trend :flag="dayAmountFlag">
              <span slot="term">日环比</span>
              {{hbAmount}}%
            </trend>
          </div>
          <template slot="footer">今日销售额<span>￥ {{totalTodayAmount}}</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总订单量" :total="orderCount">
          <a-tooltip title="订单量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <!--<mini-bar/>-->
            <trend :flag="monthCountFlag" style="margin-right: 16px;">
              <span slot="term">月同比</span>
              {{tbCount}}%
            </trend>
            <trend :flag="dayCountFlag">
              <span slot="term">日环比</span>
              {{hbCount}}%
            </trend>
          </div>
          <template slot="footer">今日订单 <span>{{totalTodayCount}}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="商品数量" :total="totalCount">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <!-- <div>
             <mini-progress color="rgb(19, 194, 194)" :target="50" :percentage="100" height="8px"/>
           </div>-->
          <template slot="footer">
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">已上架</span>
              {{ysjCount}}
            </trend>
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">已下架</span>
              {{yxjCount}}
            </trend>
            <trend flag="down">
              <span slot="term"> 违规下架</span>
              {{wgxjCount}}
            </trend>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="关注用户" :total="totalUser | NumberFormat">
          <a-tooltip title="收藏店铺的用户" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <div class="antv-chart-mini">
              <div class="chart-wrapper" :style="{ height: 46 }">
                <v-chart :force-fit="true" :height="height" :data="targetEntityData" :padding="[36, 0, 18, 0]">
                  <v-tooltip/>
                  <v-smooth-area position="x*y"/>
                </v-chart>
              </div>
            </div>
          </div>
          <template slot="footer">近一月新增<span> {{ monthCount | NumberFormat }}</span></template>
        </chart-card>
      </a-col>

    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="getSaleData('day','今日')">今日</a>
              <a @click="getSaleData('week','本周')">本周</a>
              <a @click="getSaleData('month','本月')">本月</a>
              <a @click="getSaleData('year','本年')">本年</a>
            </div>
            <!--<a-range-picker :style="{width: '256px'}"/>-->
            <a-select v-model="year" style="width: 120px" @change="yearChange">
              <a-select-option value="2019">
                2019
              </a-select-option>
              <a-select-option value="2020">
                2020
              </a-select-option>
              <a-select-option value="2021">
                2021
              </a-select-option>
              <a-select-option value="2022">
                2022
              </a-select-option>
              <a-select-option value="2023">
                2023
              </a-select-option>
              <a-select-option value="2024">
                2024
              </a-select-option>
            </a-select>
          </div>
          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="amountList" :title="saleTitle+'销售额趋势'"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售额排行榜" :list="saleAmountList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="订单量" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="countList" title="订单量趋势"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店订单量排行榜" :list="saleCountList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
            <!--<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
             <a class="ant-dropdown-link" href="#">
               <a-icon type="ellipsis"/>
             </a>
            <a-menu slot="overlay">
               <a-menu-item>
                 <a href="javascript:;">操作一</a>
               </a-menu-item>
               <a-menu-item>
                 <a href="javascript:;">操作二</a>
               </a-menu-item>
             </a-menu>
            </a-dropdown>-->
            <a-row :gutter="68">
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                <number-info :total="searchCount">
                  <span slot="subtitle">
                    <span>搜索用户数</span>
                    <a-tooltip title="指标说明" slot="action">
                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }"/>
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="userCountList" :scale="searchUserScale"/>
                </div>
              </a-col>
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                <number-info :total="avgCount" status="down">
                  <span slot="subtitle">
                    <span>人均搜索次数</span>
                    <a-tooltip title="指标说明" slot="action">
                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }"/>
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="avgCountList" :scale="searchUserScale"/>
                </div>
              </a-col>
            </a-row>
            <div class="ant-table-wrapper">
              <a-table
                row-key="index"
                size="small"
                :columns="searchTableColumns"
                :dataSource="searchData"
                :pagination="{ pageSize: this.pageSize }"
              >
                <span slot="range" slot-scope="text, record">
                  <trend :flag="record.status === 0 ? 'up' : 'down'">
                    {{ text }}%
                  </trend>
                </span>
              </a-table>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }">
            <div slot="extra" style="height: inherit;">
              <!-- style="bottom: 12px;display: inline-block;" -->
              <span class="dashboard-analysis-iconGroup">
               <!-- <a-dropdown :trigger="['click']" placement="bottomLeft">
                  <a-icon type="ellipsis" class="ant-dropdown-link"/>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;">操作一</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">操作二</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>-->
              </span>
              <!-- <div class="analysis-salesTypeRadio">
                 <a-radio-group defaultValue="a">
                   <a-radio-button value="a">全部渠道</a-radio-button>
                   <a-radio-button value="b">线上</a-radio-button>
                   <a-radio-button value="c">门店</a-radio-button>
                 </a-radio-group>
               </div>-->

            </div>
            <h4>销售额</h4>
            <div>
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="item*percent"/>
                  <v-axis/>
                  <!-- position="right" :offsetX="-140" -->
                  <v-legend dataKey="item"/>
                  <v-pie position="percent" color="item" :vStyle="pieStyle"/>
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>
                </v-chart>
              </div>

            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
  import { mixinDevice } from '@/utils/mixin'
  import ProductScMiniArea from '../../components/Charts/ProductScMiniArea'

  const amountList = []
  const countList = []


  const rankList = []
  for (let i = 0; i < 7; i++) {
    rankList.push({
      name: '白鹭岛 ' + (i + 1) + ' 号店',
      total: 1234.56 - i * 100
    })
  }

  const searchUserScale = [
    {
      dataKey: 'x',
      alias: '时间'
    },
    {
      dataKey: 'y',
      alias: '用户数',
      min: 0,
      max: 10
    }]

  const searchTableColumns = [
    {
      title: '排名',
      align: 'center',
      customRender: (text, record, index) => index + 1
    },
    {
      dataIndex: 'content',
      align: 'center',
      title: '搜索关键词'
    },
    {
      dataIndex: 'searchUserCount',
      align: 'center',
      title: '搜索用户数'
    },
    {
      dataIndex: 'searchCount',
      title: '搜索数',
      align: 'center'
    }
  ]


  export default {
    name: 'Analysis',
    mixins: [mixinDevice],
    components: {
      ProductScMiniArea,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      NumberInfo,
      MiniSmoothArea
    },
    data() {
      return {
        loading: true,
        rankList,
        pageSize: 10,
        year: moment().year(),
        // 搜索用户数
        userCountList: [],
        avgCountList: [],
        avgCount: 0,
        searchCount: 0,
        searchUserScale,
        searchTableColumns,
        totalUser:0,
        saleTitle: '今年',
        searchData: [],
        //一年销售额
        amountList: [],
        saleAmountList: [],
        saleCountList: [],
        //一年订单量
        countList: [],
        monthAmountFlag: 'up',
        dayAmountFlag: 'up',
        tbAmount: '0',
        hbAmount: '0',
        totalTodayAmount: 0,
        monthCount:0,
        monthCountFlag: 'up',
        dayCountFlag: 'up',
        tbCount: '0',
        hbCount: '0',
        totalTodayCount: 0,
        //总销售额
        totalAmount: 0,
        orderCount: 0,
        pieScale: [],
        wsjCount: 0,
        ysjCount: 0,
        yxjCount: 0,
        wgxjCount: 0,
        totalCount: 0,
        pieData: [],
        targetEntityData:[],
        sourceData: [],
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        }
      }
    },
    methods: {
      yearChange(value) {
        this.getSaleData('year', value + '年', value)
      },
      getSaleData(type, saleTitle, year) {
        if (saleTitle == '本年') {
          this.year = moment().year()
        }
        this.saleTitle = saleTitle
        this.http.get(this, {
          url: this.api.order.totalSaleByType,
          data: {
            type: type,
            year: year
          },
          success: function(me, data) {
            me.amountList = data.amountList
            me.countList = data.countList
            me.saleAmountList = data.saleAmountList
            me.saleCountList = data.saleCountList
          }
        })
      },
      getProductCount() {
        this.http.get(this, {
          url: this.api.product.totalProduct,
          data: {},
          success: function(me, data) {
            me.wsjCount = data.wsjCount
            me.ysjCount = data.ysjCount
            me.yxjCount = data.yxjCount
            me.wgxjCount = data.wgxjCount
            me.totalCount = data.totalCount
          }
        })
      },
      getSearchKeyWordData() {
        this.http.get(this, {
          url: this.api.suk.page,
          data: {},
          success: function(me, data, extra) {
            me.searchData = data.records
            me.pageSize = Number(data.size)
            me.avgCount = extra.avgCount
            me.avgCountList = extra.avgCountList
            me.searchCount = extra.searchCount
            me.userCountList = extra.userCountList
          }
        })
      },

      getSaleByCateGory() {
        this.http.get(this, {
          url: this.api.order.getSaleByCateGory,
          data: {},
          success: function(me, data, extra) {


            const DataSet = require('@antv/data-set')
            const sourceData = data.saleList
            const pieScale = [{
              dataKey: 'percent',
              min: 0,
              formatter: '.0%'
            }]
            const dv = new DataSet.View().source(sourceData)
            dv.transform({
              type: 'percent',
              field: 'count',
              dimension: 'item',
              as: 'percent'
            })
            me.pieScale = pieScale
            me.pieData = dv.rows
          }
        })
      },
      totalByTargetEntity() {
        this.http.get(this, {
          url: this.api.collecon.totalByTargetEntity,
          data: {},
          success: function(me, data) {
            me.targetEntityData = data.list
            me.monthCount = data.monthCount
            me.totalUser = data.totalCount
          }
        })
      },
      getTotalData() {
        this.http.get(this, {
          url: this.api.order.getTotalData,
          data: {},
          success: function(me, data) {
            if(data.totalAmount)
            {
              me.totalAmount = data.totalAmount
            }

            me.orderCount = data.orderCount
            me.monthAmountFlag = data.monthAmountFlag
            me.totalTodayAmount = data.totalTodayAmount
            me.tbAmount = data.tbAmount

            me.dayAmountFlag = data.dayAmountFlag
            me.hbAmount = data.hbAmount


            me.monthCountFlag = data.monthCountFlag
            me.totalTodayCount = data.totalTodayCount
            me.tbCount = data.tbCount

            me.dayCountFlag = data.dayCountFlag
            me.hbCount = data.hbCount
          }
        })
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      //this.getSaleData('year', '本年')
      //this.totalByTargetEntity()
      this.getTotalData()
      //this.getSearchKeyWordData()
      this.getProductCount()
      this.getSaleByCateGory()
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);

    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0, 0, 0, .45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }

  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
